<template>
  <div class="question">
    <el-card>
      <el-form :model="form" label-width="50px" ref="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subject">
              <el-select clearable placeholder="请选择学科" v-model="form.subject">
                <el-option
                  v-for="(item, index) in subjectList"
                  :key="index"
                  :value="item.id"
                  :label="item.short_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="阶段" prop="step">
              <el-select clearable placeholder="请选择阶段" v-model="form.step">
                <el-option
                  v-for="(value, key, index) in steps"
                  :key="index"
                  :value="+key"
                  :label="value"
                ></el-option>
                <!-- <el-option :value="1" label="初级"></el-option>
                <el-option :value="2" label="中级"></el-option>
                <el-option :value="3" label="高级"></el-option>-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业" prop="enterprise">
              <el-select clearable placeholder="请选择企业" v-model="form.enterprise">
                <el-option
                  v-for="(item, index) in enterpriseList"
                  :key="index"
                  :value="item.id"
                  :label="item.short_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题型" prop="type">
              <el-select clearable placeholder="请选择题型" v-model="form.type">
                <el-option
                  :value="+key"
                  :label="value"
                  v-for="(value,key,index) in typeObj"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- </el-row> -->
          <!-- <el-row> -->
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select clearable placeholder="请选择难度" v-model="form.difficulty">
                <el-option
                  :value="+key"
                  :label="value"
                  v-for="(value,key,index) in difficulties"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="作者" prop="username">
              <el-input v-model="form.username" class="width217"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select clearable placeholder="请选择状态" v-model="form.status">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期" prop="create_time">
              <el-date-picker v-model="form.create_time" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label-width="0px">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">清除</el-button>
              <el-button type="primary" @click="add">+新增试题</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="card2">
      <el-table :data="tableData" border>
        <el-table-column label="序号">
          <template
            v-slot="scope"
          >{{ (pagination.currentPage-1) * pagination.pageSize + scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="题目">
          <template v-slot="scope">
            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段">
          <template v-slot="scope">
            <span>{{scope.row.subject_name}}.{{steps[scope.row.step]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型">
          <template v-slot="scope">{{ typeObj[scope.row.type] }}</template>
        </el-table-column>
        <el-table-column label="企业" prop="enterprise_name"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope">
            <span :class="{red: scope.row.status == 0}">{{ scope.row.status==0 ? '禁用' : '启用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="访问量" prop="reads"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              @click="setStatus(scope.row.id)"
            >{{ scope.row.status==1 ? '禁用' : '启用'}}</el-button>
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[1,10,20,30,40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </el-card>

    <addQuestion
      ref="addQuestion"
      :subjectList="subjectList"
      :steps="steps"
      :enterpriseList="enterpriseList"
      :difficulties="difficulties"
      :typeObj="typeObj" @search="search" @getData = "getData"
    ></addQuestion>
  </div>
</template>

<script>
import { getBusinessData } from "@/api/business.js";
import { getTableData } from "@/api/subject.js";
import {
  getQuestionList,
  setQuestionStatus,
  delQuestion
} from "@/api/question.js";
import addQuestion from "@/views/home/question/addQuestion.vue";
export default {
  components: {
    addQuestion
  },
  data() {
    return {
      form: {
        subject: "",
        step: "",
        enterprise: "",
        type: "",
        difficulty: "",
        username: "",
        status: "",
        create_time: "",
        title: ""
      },
      enterpriseList: [],
      subjectList: [],
      tableData: [],
      steps: {
        1: "初级",
        2: "中级",
        3: "高级"
      },
      difficulties: {
        1: "简单",
        2: "一般",
        3: "困难"
      },
      typeObj: {
        1: "单选",
        2: "多选",
        3: "简答"
      },
      pagination: {
        currentPage: 1,
        pageSize: 1,
        total: 5
      }
    };
  },

  methods: {
    handleSizeChange(size) {
      console.log("页容量：", size);
      this.pagination.pageSize = size;
      this.pagination.currentPage = 1;
      this.getData();
    },

    handleCurrentChange(page) {
      console.log("当前页: ", page);
      this.pagination.currentPage = page;
      this.getData();
    },

    getData() {
      getQuestionList({
        page: this.pagination.currentPage,
        limit: this.pagination.pageSize,
        ...this.form
      }).then(res => {
        console.log("题库列表数据:", res);
        this.tableData = res.data.items;
        // 将城市和多选框，从字符串转为数组
        res.data.items.forEach(item => {
          item.city = item.city.split(',')
          item.multiple_select_answer = item.multiple_select_answer.split(',')
        })
        this.pagination.total = res.data.pagination.total;
      });
    },

    // 搜索
    search() {
      this.pagination.currentPage = 1;
      this.getData();
    },

    // 清除
    reset() {
      this.$refs.form.resetFields();
      this.search();
    },

    // 修改状态
    setStatus(id) {
      setQuestionStatus({ id }).then(() => {
        this.$message.success("状态修改成功");
        // 刷新
        this.getData();
      });
    },

    // 删除
    del() {
      this.$confirm("您确认要删除此条数据吗？？？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delQuestion().then(() => {
            this.$message.success("该条数据删除成功");
            this.search();
          });
        })
        .catch(() => {});
    },

    // 新增
    add() {
      this.$refs.addQuestion.dialogFormVisible = true;
      this.$refs.addQuestion.mode = 'add'
    },

    // 编辑
    edit(row){
      this.$refs.addQuestion.dialogFormVisible = true
      this.$refs.addQuestion.mode = 'edit'
      // 深拷贝
      this.$refs.addQuestion.form = JSON.parse(JSON.stringify(row))
    }
  },

  created() {
    getBusinessData({ limit: 100 }).then(res => {
      // console.log('企业列表数据', res);
      this.enterpriseList = res.data.items;
    });

    getTableData({ limit: 100 }).then(res => {
      // console.log('学科列表数据:', res);
      this.subjectList = res.data.items;
    });

    this.getData();
  }
};
</script>

<style lang="less">
.question {
  .card2 {
    margin-top: 20px;
  }

  .width217 {
    width: 217px;
  }

  .pagination {
    text-align: center;
    margin-top: 30px;
  }

  .red {
    color: #f00;
  }
}
</style>